<template>
  <div id="commissionList">
    <div ref="list" style="overflow-y: auto; -webkit-overflow-scrolling: touch; margin-top: 0.9rem;">
      <group :title="item.day_time + '<span class=f26 style=float:right>总结余: '+ item.money_total +'元</span>'" v-for="(item, index) in commissionData" :key="index">
        <cell :title="items.content" :inline-desc='items.time_info' v-for="(items, idx) in item.data_item" :key="idx">
          <p :class="[items.type== 1? 'text-orange': 'text-green']">{{ items.type == 1? '-': '+' }}{{ items.money }}</p>
        </cell>
      </group>
      <load-more tip="加载数据中..." v-if="isLoadingMore"></load-more>
    </div>
    <div class="null" v-if="isLoading && !commissionData.length">
      该月暂无佣金明细
    </div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import { LoadMore, Cell } from 'vux'
  export default{
    components: {
      PubHeader,
      LoadMore,
      Cell
    },
    created() {
      this.getData()
    },
    mounted() {
      const bodyHeight = document.documentElement.clientHeight
      const headerHeight = this.$refs['header'].offsetHeight
      const listHeight = bodyHeight - headerHeight
      this.$refs['list'].style.height = listHeight + 'px'
      this.$refs['list'].onscroll = () => {
        const scrollTop = this.$refs['list'].scrollTop
        const setScroolHeight = this.$refs['list'].scrollHeight - listHeight - scrollTop
        if(setScroolHeight <= 120 && !this.isLoadingMore && this.page < this.pages) {
          this.isLoadingMore = true
          this.page++
          this.getData()
        }
      }
    },
    data() {
      return {
        isLoading: false,
        isLoadingMore: false,
        commissionData: [],
        page: 1,
        pages: 1
      }
    },
    methods: {
      getData() {
        this.$http.post($config.host + '/api/Account/bill', qs.stringify({
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          page: this.page
        })).then(res => {
          const {code, data, msg} = res.data
          this.isLoading = true
          this.isLoadingMore = false
          if(code == '1' && data) {
            this.pages = data.pages
            this.commissionData = this.commissionData.concat(data.data_list)
          } else {
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch(err => {
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      }
    }
  }
</script>
<style scoped>
  .weui-cells__title{
    margin-top: 0.47em !important;
  }
  .weui-cell{
    height: 1.15rem;
  }
</style>
